<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
 <!DOCTYPE html>
 <html lang="en">
 <head>
   <title>jQuery-basics</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <link type="text/css" rel="stylesheet" href="css/jqry.css">

   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
   <script src="js/jquery.tools.min.js" type="text/javascript"></script>
   <script type="text/javascript">
     $(document).ready(function(){
       $("img[rel]").overlay();
       $("a").click(function(event){
         alert("As you can see, the link no longer took you to jquery.com");
         event.preventDefault();
         $("a").removeClass("test");
       });
       $("a").addClass("test");
//       $("a").click(function(event){
//           event.preventDefault();
//           $(this).hide("slow");
//       });
      });

     //$("a").removeClass("test");
     
   </script>
 </head>
 <body>
   <a href="http://jquery.com/">jQuery</a><br>
   <img src="img/ss001_vocabtime_thumb.jpg" alt="Vocab Time thumb" rel="#ss01">
   <img src="img/ss002_vocab_exam-trans_ques_thumb.jpg" alt="Vocab Exam-Trans thumb" rel="#ss02">
<!-- first overlay. id attribute matches our selector -->
<div class="simple_overlay" id="ss01">

    <!-- large image -->
    <img src="img/ss001_vocabtime.jpg" alt="Vocab Time" />

    <!-- image details -->
    <div class="details">
        <h3>The Barcelona Pavilion</h3>

        <h4>Barcelona, Spain</h4>

        <p>The content ...</p>
    </div>

</div>

<!-- second overlay -->
<div class="simple_overlay" id="ss02">

    <!-- large image -->
    <img src="img/ss002_vocab_exam-trans_ques.jpg" alt="Vocab Exam-Trans" />

    <!-- image details -->
    <div class="details">
        <h3>The Barcelona Pavilion</h3>

        <h4>Barcelona, Spain</h4>

        <p>The content ...</p>
    </div>

</div>

</body>
</html>


